<#include "/tags/updatedSinceTag.ftl">

<#macro friendList username="">
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery("div.friendListBox li").each(function(){
				var $this = jQuery(this);
				var $popup = $this.find("div.tooltipAvatar");
				$this.hover(
					function(){
						$popup.show();					
					},
					function(){
						$popup.hide();
					}
				);
			});
		});		
	</script>
    <#if data.friends??>
	    <div class="question">
	      <h1>Danh sách bạn bè <b style="color:#CA4A0C">(${data.friendCount})</b></h1>
	      <#if data.friendCount gt 0>
	      	<div class="dem1"><a class="viewall" href="${rc.contextPath}/ajax/userList.html?type=FRIEND&username=${username}&pageId=1&total=${data.friendCount}"></a></div>
	      </#if>
	    </div>
		<div class="clearthis"></div>
		<div class="friendListBox">
              <ul>
		<#list data.friends as friend> 		    
              	<li>
                	<span class="${friend.loggined?string('online','offline')}"></span>
		      		<a href="${rc.contextPath}/${friend.username}">
		      			<img src="<#if friend.avatar?exists>${friend.avatar}<#else>${rc.contextPath}/images/avatar.png</#if>"  
		      				<#if friend.status?? && friend.status?has_content>title="${friend.status}"</#if> 
		      				alt="${friend.username}" width="50" height="50"/>
		      		</a>
					<div class="tooltipAvatar" style="display:none;">
                    	<a href="#" class="fl avatar"><img src="<#if friend.avatar?exists>${friend.avatar}<#else>${rc.contextPath}/images/avatar.png</#if>" width="74"/></a>
                        <span>
                        	<h2><a href="#">${friend.fullName}</a></h2>
                            <p><a href="${rc.contextPath}/${friend.username}">Trang cá nhân</a> | <label class="${friend.loggined?string('online','offline')}">${friend.loggined?string('ONLINE','OFFLINE')}</label></p>
                            <ul>
                            	<li>&bull; Đang thực hiện: <b>${friend.numberDoingGoals} mục tiêu</b></li>
                                <li>&bull; Đã hoàn thành: <b>${friend.numberFinishedGoals} mục tiêu</b></li>
                                <li>&bull; Số bài chia sẻ: <b>${friend.numberOfAllEntries} bài viết</b></li>
                            </ul>
                        </span>
                    </div>
                </li>
		    <#if friend_has_next>
			
		    </#if>
	    </#list>
			<#if (data.friends?size == 0)>
				<p align="center" style="color:#cecece;font-size:11px;"><em>Hiện tại bạn chưa có bạn bè trong danh sách.</em></p>
			</#if>
			</ul>
		</div>
    </#if>
</#macro>